<template>
  <div class="tag-wrap" :class="catClass" @click="clicked">
    <nsi :i="itype" :value="tag.val"></nsi>
    <ri class="close-button" i="x" v-if="deletable" @click="deleteTag"></ri>
  </div>
</template>

<script>
// TODO: 现在所有的标签的样式都是写在代码中的，未来应当扩充成让用户可以编辑自定义标签的样式，选择对应的颜色和图标
import Nsi from "@/tools/NeoStatIcon"
let catMap = {
  0: "topic", 
  1: "event", 
  2: "people", 
  3: "place", 
  4: "time", 
  5: "emotion",
  6: "genre",
  7: "era",
  8: "style",
  9: "language",
  10: "field",
  11: "tune",
  12: "rhyme",
};
let catIconMap = {
  0: "comments", // topic
  1: "hashtag", // event
  2: "user", // people
  3: "place", 
  4: "moon", // time
  5: "emotion",
  6: "genre",
  7: "era",
  8: "style",
  9: "language",
  10: "field",
  11: "tune",
  12: "rhyme",
};
export default {
  components: {
    Nsi
  },
  props: ["tag", "deletable"],
  computed: {
    itype() {
      let cat = catIconMap[this.tag.cat];
      if (!cat) {
        return "comments";
      } else {
        return cat;
      }
    },
    catClass() {
      return catMap[this.tag.cat];
    }
  },
  methods: {
    clicked() {
      this.$emit("click", this.tag);
    },
    deleteTag() {
      this.$emit("delete-tag", this.tag);
    }
  }
};
</script>

<style lang="stylus">
.tag-wrap
  display inline-block
  font-size 0.7em
  border-radius 4px
  cursor pointer
  color #409EFF
  background-color #E2F0FF
  border 1px solid #409EFF
  padding 0.2vh 0.2vw


.tag-wrap.event,.tag-wrap.genre,.tag-wrap.language
  color #409EFF
  background-color #ECF5FF
  border 1px solid #409EFF

.tag-wrap.unknown,.tag-wrap.unknown,.tag-wrap.tune
  color #FD8042
  background-color #FDE4D8
  border 1px solid #FD8042

.tag-wrap.place,.tag-wrap.era,.tag-wrap.field
  color teal
  background-color #def2f0
  border 1px solid teal

.tag-wrap.people,.tag-wrap.style
  color #A076E5
  background-color #DEDAE5
  border 1px solid #A076E5

.tag-wrap.time,.tag-wrap.rhyme
  color #F56C6C
  background-color #FDE2E2
  border 1px solid #F56C6C

.tag-wrap.edit
  color #999
  background-color #eee
  border 1px solid #ccc

</style>